<template>
  <div class="container">
    <div class="form">
      <div class="form-title">Dymone图书分享系统</div>
      <div class="input-group">
        <label for="username">账号</label>
        <input type="text" id="username">
      </div>
      <div class="input-group">
        <label for="password">密码</label>
        <input type="password" id="password">
      </div>
      <div class="btn-group">
        <button @click="handleLoginBtnClick">登录</button>
        <button @click="hanldeRegisterBtnClick">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  name: 'Login',
  methods: {
    hanldeRegisterBtnClick () {
      this.$router.push('/register')
    },
    handleLoginBtnClick () {
      // axios({
      //   method: 'post',
      //   url: '',
      //   data: {
      //     username: '',
      //     password: ''
      //   }
      // })
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
  .container{
    float: left;
    width: 100%;
    height: 100vh;
    background-size: 100%;
    background: url("../../../static/images/login/login_bg.jpg") left center no-repeat;
    text-align: center;
  }
  .form-title{
    margin: 130px 0 auto;
    font-size: 33px;
    text-align: center;
  }
  .input-group{
    display: inline-block;
    font-size: 19px;
  }
  .input-group:nth-child(2){/*这里有点问题*/
    margin-top: 53px;
    margin-bottom: 17px;
  }
  .input-group > input{
    height: 38px;
    background: none;
    border: 2px solid rgba(112,128,144,1);
    border-radius: 3px;
    padding-left: 8px;
  }
  .btn-group{
    text-align: center;
    margin-top: 15px;
  }
  .btn-group button{
    width: 60px;
    height: 38px;
    border-radius: 2px;
  }
</style>
